<template>
  <div class="container" >
        <div class="claim">
            <div class="header">
                <ul>
                    <li class="link-li">
                        <navigator class="link" url="/pages/claim/claimSettlement?status=0">
                            <p class="num">{{info.YsCaseCount}}</p>
                            <p class="desc">预审材料（个）</p>
                        </navigator>
                    </li>
                    <li class="link-li">
                        <navigator class="link" url="/pages/claim/claimSettlement?status=3">
                            <p class="num">{{info.BhCaseCount}}</p>
                            <p class="desc">预审驳回（个）</p>
                        </navigator>
                    </li>
                    <li class="link-li">
                        <navigator class="link" url="/pages/claim/claimSettlement?status=2">
                            <p class="num">{{info.TgCaseCount}}</p>
                            <p class="desc">预审通过（个）</p>
                        </navigator>
                    </li>
                    <li>
                        <p class="num">{{info.payAmount}}</p>
                        <p class="desc">累计理赔款（元）</p>
                    </li>
                </ul>
                <img class="header-bg" src="/static/image/ballBg.png" alt="">
            </div>
            <div class="cell-list">
                <wux-cell thumb="../../image/lipei.png" is-link url="/pages/claim/claimSettlement" title="理赔管理" ></wux-cell>
            </div>
            <div class="cell-list">
                <wux-cell thumb="../../image/tel.png" is-link url="/pages/claim/accidentReport" title="事故报案" ></wux-cell>
                <wux-cell thumb="../../image/commit.png" is-link url="/pages/claim/claimSettlement?status=0" title="提交材料" ></wux-cell>
                <wux-cell thumb="../../image/transport.png" is-link url="/pages/claim/claimSettlement?status=2" title="快递材料" ></wux-cell>
            </div>
            <div class="cell-list">
                <wux-cell thumb="../../image/lipeiguanli.png" is-link url="/pages/claim/chooseType" title="理赔材料有哪些?" ></wux-cell>
            </div>
        </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { statistics } from 'api/api'
export default {
    data () {
        return {
            info: {
                BhCaseCount: 0,
                TgCaseCount: 0,
                YsCaseCount: 0,
                payAmount: 0
            }
        }
    },
    methods: {
        _statistics () {
            statistics()
                .then((res) => {
                    if (res.state === 'success') {
                        this.info = res.data
                    }
                    console.log(res)
                })
        },
        ...mapActions('org', [
            'getOrgList'
        ])
    },
    async onShow () {
        await this.getOrgList()
        await this._statistics()
    }
}
</script>

<style lang='stylus' scoped>
.claim
    display: flex
    flex-direction: column
    align-items: center
    width 750rpx
    box-sizing border-box
    .header
        width 750rpx
        box-sizing border-box
        background-color #007aff
        position relative
        overflow hidden
        ul
            position relative
            display flex
            flex-wrap wrap
            align-items center
            padding 34rpx 0 43rpx
            z-index 2
            li
                padding 44rpx 0
                width 50%
                text-align center
                color: #fff
                font-size 24rpx
                &.link-li
                    padding 0
                    .link
                        padding 44rpx 0
                .num
                    font-size 50rpx
        .header-bg
            width 100%
            position absolute
            bottom -145rpx
            z-index 1
    .cell-list
        background-color #fff
        box-sizing border-box
        width 750rpx
        padding 0 30rpx 0 10rpx
        margin-bottom: 10rpx
        display:block






</style>
